<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('人员角色授权列表')"/>
    <style>
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }

    </style>
</head>
<body>
<div class="layuimini-container">

<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="main-container" style="min-height: 390px; max-height: 500px; overflow: auto">
                    <ul class="dept-tree" data-id="0" id="deptTree" style="width: 100%;"></ul>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="main-container" style="min-height: 390px; max-height: 500px; overflow: auto">
                    <table id="role-table" lay-filter="role-table"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="main-container" style="min-height: 390px; max-height: 500px; overflow: auto">
                    <table id="user-table" lay-filter="user-table"></table>
                    <input type="hidden" id="userId">
                </div>
                <script type="text/html" id="deptUserRole-toolbar">
                    <button sec:authorize="hasPermission('/sys/deptUserRole/add','sys:deptUserRole:add')"
                            class="layui-btn layui-btn-primary layui-btn-md" lay-event="add">
                        <i class="layui-icon layui-icon-add-1"></i>
                        新增
                    </button>
                    <button sec:authorize="hasPermission('/sys/deptUserRole/remove','sys:deptUserRole:del')"
                            class="layui-btn layui-btn-danger layui-btn-md" lay-event="batchRemove">
                        <i class="layui-icon layui-icon-delete"></i>
                        删除
                    </button>
                </script>
            </div>
        </div>
    </div>

</div>
</div>
<th:block th:include="include :: footer"/>
<script>
    var _deptId,_roleId;
    let table;
    layui.use(['table', 'form', 'jquery', 'dtree'], function () {
        table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let prefix = pName + "/system/deptUserRole/";

        deptUtil.initDeptTree("deptTree",
            function (deptId) {
                _deptId = deptId;
                table.reload('role-table', {where: {deptId: deptId}});
                return;
            },"人事"
        );

        table.render({
            elem: '#role-table',
            url: prefix + 'selectRoleByDeptId',
            page: true,
            escape: true,
            cols: [
                [
                    {
                        field: 'id',
                        title: '角色',
                        hide: true
                    },
                    {
                        field: 'name',
                        title: '角色'
                    }
                ]
            ],
            skin: 'line',
            defaultToolbar: []
        });
        table.on('row(role-table)', function (obj) {
            $('.row-selected').removeClass('row-selected'); //去除之前选中的行的，选中样式
            $(obj.tr).addClass('row-selected'); //添加当前选中的 success样式用于区别

            _roleId = obj.data.id;
            table.reload('user-table', {url: prefix + 'data',where: {deptId: _deptId,roleId: obj.data.id}});
            return;

        })

        table.render({
            elem: '#user-table',
            page: true,
            escape: true,
            cols: [
                [
                    {type: 'checkbox'},
                    {
                        field: 'username',
                        title: '用户'
                    },
                    {
                        field: 'userSn',
                        title: '工号'
                    }
                ]
            ],
            toolbar: '#deptUserRole-toolbar',
            skin: 'line',
            defaultToolbar: []
        });
        table.on('checkbox(user-table)', function(obj){

        });
        table.on('row(user-table)', function (obj) {

        });
        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        window.add = function () {
            userUtil.initUserSelect("userId", "userName", function () {
                let userId = $("#userId").val();
                if(!!_deptId && !!_roleId && !!userId){
                    let loading = layer.load();
                    $.ajax({
                        url: prefix + 'save',
                        data: JSON.stringify({deptId: _deptId, roleId: _roleId, userId: userId}),
                        dataType: 'json',
                        contentType: 'application/json',
                        type: 'post',
                        success: function (result) {
                            layer.close(loading);
                            if (result.code == 1) {
                                table.reload('user-table', {where: {deptId: _deptId,roleId: _roleId}});
                                return;
                            } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                        }
                    })
                }

            });

            return false;
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些人员角色授权', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: prefix + "batchRemove",
                    dataType: 'json',
                    data: {"ids": ids},
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 1) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                table.reload('user-table');
                            });
                        } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('user-table', {where: param});
        }

        $('#formreset').click(function(){
            $('#formId').find('input').val("")
        })
    })
</script>
</body>
</html>